<template>
    <div class="file-bread">
        <el-breadcrumb :separator-icon="ArrowRight" >
            <el-breadcrumb-item  @click="goToback" class="bread-item">{{currentMenu}}</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in currentBread" @click="returnFolder(item)" class="bread-item">
                {{item.name}}
            </el-breadcrumb-item>
        </el-breadcrumb>  
    </div>
    
</template>
<script setup lang="ts">
import {fileStore} from '@/stores/disk/file'
import {useAllDataStore} from '@/stores'
import {computed} from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
const store=fileStore()
const allStore=useAllDataStore()

const currentBread=computed(()=>store.state.currentBread)
const currentMenu=computed(()=>allStore.state.currentMenu)

//返回索引目录
const goToback=()=>{    
    store.updateCurrentBread(null)
    //更新currentFolderPaht
    store.updateCurrentFolderPaht('/')
    store.initFileList(1,10)
     //更新当前点击文件夹
     store.updateCurrentClickFile(null)
}

//返回上一级目录
const returnFolder=(item:any)=>{
    const fileName=item.name
    const filePath=item.path
    const data={
        filePath: filePath,
        fileName: fileName,
    }
    if(store.state.currentClickFile.fileName===fileName){
        //证明点击的是当前目录，不做任何操作
        return
    }else{
        //删除面包屑
        store.deleteBreadPop(item)
        //更新数据
        store.updateFileList(data)
        // //更新当前点击文件夹
        // store.updateCurrentClickFile(null)
    }
}
</script>





<style scoped lang="less">
.file-bread{
    margin-top: 20px;
    cursor: pointer;
}
.bread-item{
    font-size: 20px;
}
</style>